<template>
	<view class="person_rank">
		<view class="sales_head" v-if="showHead"> 
			<picker @change="changeStore" :range="storeList" :value="storeIndex" :range-key="'storeName'">
				<view class="tablist"> 
					<view style="margin-right:15rpx">
						{{storeList[storeIndex] ? storeList[storeIndex].storeName : '点击选择'}}
					</view>
					<image :src="BASE_IMG_URL+'newxia.png'" class="bottomimg" mode="scaleToFill"></image>
				</view>
			</picker>
		</view>
        <lxCalendar @change="chooseDay"></lxCalendar>
		<!-- <sl-calendar :rightnow="true" @change="chooseDay" :selected="selected"></sl-calendar> -->
		<view class="achievement_footer">
		<view class="btnself"  :style="[getStyleOfStatus(0)]">未审核</view>
		<view class="btnself"  :style="[getStyleOfStatus(1)]">已预约</view>
		<view class="btnself"  :style="[getStyleOfStatus(2)]">已到店</view>
		<view class="btnself"  :style="[getStyleOfStatus(3)]">已开单</view>
		<view class="btnself" v-if="false" :style="[getStyleOfStatus(4)]">服务中</view>
		<view class="btnself"  :style="[getStyleOfStatus(6)]">已完成</view>
		<view class="btnself" v-if="false" :style="{'background-color': getStyleOfStatus(10)}">已占用</view>
		<view class="btnself"  :style="[getStyleOfStatus(11)]">已超时</view>
		<view class="btnself"  :style="[getStyleOfStatus(13)]">已取消</view>
		</view>
		<view class="achievement_footer">
			<view class="footer_table">
				<view class="table_time">
					<view class="item_title">时间</view>
					<view class="time_item">
						<view>未指定</view>
					</view>
					<view class="time_item" v-for="(item,index) in staffAndArrange" :key="index">
						<view>{{item.trueName}}<br>{{ item.banci ? item.banci : ''}}</view>
					</view>
				</view>
				<scroll-view scroll-x="true" class="scroll">
					<view class="con_title">
						<view class="title_head" v-for="(time,index) in times" :key="index">{{time}}</view>
					</view> 
					<view class="con_content">
							<view class="con_data post" 
							:style="[getStyleOfApp(appo)]"
							 @longpress="telClick(appo)" @touchend="touchend" 
							 @click="upAppint(appo.apid)"
							 v-for="appo in noVipAppoList()">
								  {{appo.member_name? appo.member_name : '占用'}} 
								  <cite style="color:#333;display: block" v-if="appo.phone">{{appo.phone}}</cite>
								  <cite style="color:#333;display: block" v-if="appo.appoTimeSpan">{{appo.appoTimeSpan}}</cite>
								  <cite style="color:#333;display: block" v-if="appo.user_id">{{appo.staff_name}}</cite>
								  <cite style="color:#333;display: block" v-if="appo.goods_name">{{appo.goods_name}}</cite>
								  <cite style="color:#333;display: block" v-if="appo.remarks">{{appo.remarks}}</cite>
							 </view>
							<view class="con_data"  v-for="(time,index) in times" @click="moreClick('', time)" > 
								 <cite style="color:#fff">&nbsp;zhan</cite>
							</view> 
					</view>
					<view class="con_content" v-for="(item,idx) in staffAndArrange">
							<view class="con_data post" 
							:style="[getStyleOfApp(appo)]"
							 @longpress="telClick(appo)" @touchend="touchend" 
							 @click="upAppint(appo.apid)"
							 v-for="appo in myAppoList(item.id)">
								  {{appo.member_name? appo.member_name : '占用'}}
								  <cite style="color:#333;display: block" v-if="appo.phone">{{appo.phone}}</cite>
								  <cite style="color:#333;display: block" v-if="appo.appoTimeSpan">{{appo.appoTimeSpan}}</cite>
								  <cite style="color:#333;display: block" v-if="appo.user_id">{{appo.staff_name}}</cite>
								  <cite style="color:#333;display: block" v-if="appo.goods_name">{{appo.goods_name}}</cite>
								  <cite style="color:#333;display: block" v-if="appo.remarks">{{appo.remarks}}</cite>
							 </view>
							<view class="con_data"  v-for="(time,index) in times" @click="moreClick(item.id, time)" > 
								 <cite style="color:#fff">&nbsp;zhan</cite>
							</view>
					</view>
				</scroll-view>
			</view>
		</view> 
		
		<!-- 创建用户图标 -->
		<view class="icon_creat" @click="appoint_list">
			<image :src="BASE_IMG_URL+'morebtn.png'" mode="scaleToFill"></image>
		</view>
		
		<view>
			<u-popup v-model="show" mode="bottom" border-radius="20" height="180px"> 
				<view class="pull_con">	 
					<view class="pull_item" style="" @click="addAppint()">
						<view style="padding: 15rpx 22rpx;border: 1px solid #ededed;">预约</view>
					</view>
					<view class="pull_item" @click="doOccupyAppoint()">
						<view style="padding: 15rpx 22rpx;border: 1px solid #ededed;">占用</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getNextDay,
		timeFormat,
		getRecentDay
	} from "@/components/sl-calendar/util.js"
	import {
		netMapKey,
		getAppCtx,  
		netGetChainStoreList
	} from '@/api/login.js'
    import lxCalendar from '@/components/lx-calendar/lx-calendar.vue'
	import {
		formateDate,
	} from "@/common/util.js"
	import {
		BASE_IMG_URL
	} from '@/util/api.js' 
	import {
		netSelect, 
		netKehuDetail,
		netAppointDetail,
		netUpdateAppoint,
		netAddAppoint,
		delOccupyAppoint,
		occupyAppoint,
		getServicetimelist,
		getAppointData
		
	} from '@/api/kehu.js'
	import {
		pageJumps,
		statisticalPageJumps,
		customerPageJumps
	} from "../crm_page_jumps.js";
	export default {
        components:{
            lxCalendar,
        }, 
		mixins: [pageJumps, customerPageJumps],
		data() {
			return {
				BASE_IMG_URL: BASE_IMG_URL,
				appCtx: {},
				storeIndex: 0,
				storeList: [],
				showHead: false,
				show: false,
				islongPress: false, //长按记录变量 
				optionsMoney: [{
						text: '预约',
						value: 1
					},
					{
						text: '占用',
						value: 2
					},
					{
						text: '取消',
						value: 3
					},
				],
				selected: [], //红点
				list: [],
				dataMonth: '',
				tableFrom: {
					dateLimit: 'lately7',
					storeid: '',
				},
				day: formateDate(new Date(), 'Y-M-D'),
				bgStatus: {
						 0: '#F56C6C',
						 1: '#ffbfb0',
						 2: '#908BF1',
						 3: '#83BCF7',
						 4: '#266905',
						 5: '',
						 6: '#5cb85c',
						 10: '#909399',
						 11: '#C0C4CC',
						 13: '#909399',
						 
				 },
			  editDialogConfig: {
				  visible: false,
				  isCreate: 0, // 0=创建，1=编辑
				  cur_staff_id: 0, // 当前员工
				  cur_use_time: '', // 当前时间
				  data: {},
				  id:  null // 
				},
			  staffAndArrange:[],
			  appoints:[],
			  times:[],
			  timesSpan:0,
			  timeslength:0,
			  widthRatio:0, 
			  currentAppotime: null,
			}
		},
		onShow() {
				let that = this 
				
		  this.appCtx = getAppCtx()
		  that.getTimes();
		  that.getStoreList();
		}, 
		onReady() {
		 let that = this 
		  
		}, 
		methods: {
			changeStore(e) {
				this.storeIndex = e.detail.value
				this.tableFrom.storeid = this.storeList[e.detail.value].storeId
				this.getList()
			},
			getStoreList() {
 
				netGetChainStoreList({
					type: 'all'
				}).then(res => {
					this.storeList = res.data
					if (this.storeList.length > 1 && this.appCtx.loginedUser.roleType == 10) {
						this.showHead = true
					}
					this.storeList.unshift({
						storeName: '选择',
						storeId: ''})
					this.getList()
				})
			
			},
			telClick(item){
				console.log("打电话");
				this.islongPress = true;
				if (item.phone) {
					uni.showModal({
						title:item.member_name,
						content:'手机号码:' + item.phone,
						success:(res)=>{
							if(res.confirm){
								// #ifdef MP-ALIPAY
								dd.showCallMenu({
								    phoneNumber: item.phone, 
								    code: '+86'
								})
								// #endif
								// #ifdef MP-WEIXIN || H5 || APP-PLUS
								uni.makePhoneCall({
									phoneNumber: item.phone
								})
								// #endif
							}
						}
					})
				} else {
					uni.showToast({
						title: '暂无联系方式',
						icon: 'none'
					})
					this.telActions = []
					this.description = ''
				}
			}, 
			touchend(){
				//延时执行为了防止 click() 还未判断 islongPress 的值就被置为 fasle
				 setTimeout(() => {
					this.islongPress = false
				}, 200)
			} ,
			moreClick(staff_id, currentAppotime) {
				this.currentAppotime = currentAppotime
				uni.setStorageSync('__staffId', staff_id)
				this.show = true
			},
			
			doOccupyAppoint() {
				let that = this
				console.log('占用....') 
				let params =    { 
				} 
			    {
					let usetime = this.day+' '+this.currentAppotime
					let user_id = uni.getStorageSync('__staffId')
					if(user_id) {
						params.user_id = user_id
					}
					params.usetime = usetime
					occupyAppoint(params).then(res => {
						uni.showToast({
							title: '占用成功',
							icon: 'none',
							duration: 2000
						}) 
						
						that.show = false
						that.getList()
					})
				}
				
			},
			doDelOccupyAppoint(id) {
				let that = this
				console.log('占用....') 
				let params =    { 
				} 
				if(id) {
					uni.showModal({
						title: '提示',
						cancelText: '取消',
						confirmText: '确认',
						content: '请确认是否取消占用?',
						success: (res) => {
							if (res.confirm) {
								
								delOccupyAppoint({id: id}).then(res => {
									uni.showToast({
										title: '取消占用成功',
										icon: 'none',
										duration: 2000
									})
									that.getList()
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					}) 
				}   
			}, 
			//日历选择日期
			chooseDay(e) {
				let that = this
				console.log('日历选择:', e)
				this.day = timeFormat(new Date(e.fulldate.replace(/-/g, "/")), "yyyy-MM-dd");
				//请求该日已有业务的时间段数据
				that.getList();
			},
			// 选择打卡日期
			bindDateChange: function(e) {
				this.day = e.target.value
			},
			
			changeTopMoney(e) {
				this.valueMoney = e.detail.value
				this.getMydetail()
			},
			 
			handleData(data) {
				// data.reverse()
				let y = []
				let x1 = []
				data.forEach((ele, index) => {
					y.push(ele.staffName)
					x1.push(ele.salesAmount)
				})
				this.chartData.categories = y
				this.chartData.series[0].data = x1
			},
			changeYeay(e) {
				this.dataYear = e.detail.value
				this.getData()
			},
			changeDataType(e) {
				this.typeIndex = e.detail.value
				this.getData()
			},
			changeMonth(e) {
				this.dataMonth = e.detail.value
				this.getData()
			},
			changeArr(e) {
				this.arrIndex = e.detail.value
				this.getData()
			},
			
			minBetween: function(beginHm, endHm){//第一个支付方式
				var that = this;
				let startDate = ('2016-01-01 ' + beginHm).replace(/-/g, '/')
				let endDate = ('2016-01-01 '+ endHm).replace(/-/g, '/')
				var difference = Math.abs(new Date(endDate).getTime() - new Date(startDate).getTime())
				return  Math.ceil(difference/(1000*60))
			}, 
			calc2Begin: function(hm){//第一个支付方式
				var that = this;
				if(that.times.length > 0) {
				return that.minBetween(that.times[0], hm)
				}
				return 0
			}, 
			calcTimesWidth: function(){//第一个支付方式
				var that = this;
				let unitWith = 100
				
				// #ifdef MP-DXX
				unitWith = 200
				// #endif
				if(that.times.length > 0) {
				return that.times.length * unitWith 
				}
				return 0
			}, 

			setTimes: function(){//第一个支付方式
				var that = this;
				let datas = []
				if(that.times.length > 0) {
				  that.timesSpan = that.minBetween(that.times[0], that.times[that.times.length -1])  + that.minBetween(that.times[0], that.times[1])
				}
			}, 
			getStyleOfStatus: function(status){
				var that = this;
				return {'background': that.bgStatus[status]}
			},  
			getStyleOfApp: function(appo){
				var that = this;
				var hmstart=appo.usetime.split(" ")[1];
				var appoSpan = 60;
				if(appo.usetime2) {
					appoSpan = that.minBetween(hmstart, appo.usetime2.split(" ")[1]) 
				} 
				let styleapp =  {} 
				
				if(that.timesSpan > 0) { 
					var _left = (parseFloat(that.calc2Begin(hmstart)/that.timesSpan)*that.calcTimesWidth()).toFixed(10) +"rpx";
					var _width = (parseFloat(appoSpan/that.timesSpan)*that.calcTimesWidth()).toFixed(10) +"rpx";
					 
					// return [{color:'#333'},{height: '100px'},{width: _width}, {left: _left},{background: that.bgStatus[appo.status]}]
					styleapp = {'color':'#333','height': '100px','width': _width, 'left': _left,'background': that.bgStatus[appo.status]}
				}
				
				return styleapp
			},  
				 
			closeMe() {
				var that = this; 
				setTimeout(() => {
				this.editDialogConfig.prent = {}
				this.editDialogConfig.id = 0
				this.editDialogConfig.visible = false
				FT.closeWin('APPOINT_CENTER')
				}, 200)

			},
			toCashier(apid) {
				var that = this; 
				setTimeout(() => {
				this.editDialogConfig.prent = {}
				this.editDialogConfig.id = 0
				this.editDialogConfig.visible = false
				FT.closeWin('APPOINT_CENTER')
				}, 200)
			},
			hideEditDialog(apid) {

				var that = this; 
				setTimeout(() => {
				this.editDialogConfig.prent = {}
				this.editDialogConfig.id = 0
				this.editDialogConfig.visible = false
				this.getList()
				}, 200)
			},
			getTimes: function() {
				var that = this; 
				let params = {
					day: that.day
				}
				getServicetimelist().then(res => {
					that.times = res.data
					that.timeslength  = that.times.length;
					console.log("============")
					that.widthRatio = 200*that.timeslength/(3600-68)
					that.setTimes()
				})
				 
			},
			noVipAppoList: function() {
				var that = this;
				let datas = []
				that.appoints.forEach((v, i) => {
				let item = v;
				if(!item.user_id || item.user_id <=0) {
				datas.push(item)
				}
				})
				return datas
			},
			myAppoList: function(staff_id) {
				var that = this;
				let datas = []
				that.appoints.forEach((v, i) => {
				let item = v;
				if(item.user_id == staff_id) {
				datas.push(item)
				}
				})
				return datas
			},
			getList: function() {
				var that = this;   
				let params = {
					day: that.day,
					storeid: that.tableFrom.storeid
				}
				
				getAppointData(params).then(res => {
					that.staffAndArrange = res.data.staffAndArrange;
					that.appoints = res.data.appoints;
				})
			},

			hideEditDialog() {
				setTimeout(() => {
				this.editDialogConfig.prent = {}
				this.editDialogConfig.id = 0
				this.editDialogConfig.visible = false
				this.getList()
				}, 200)
			},
			upAppint: function(id) {
				var that = this;
				if(this.islongPress == false){
					if(id) {
						uni.navigateTo({
							url: '/pagesA/crm/appoint/newAppoint?id=' +  (id||'')
						})
					} 
				    console.log("不是长按事件");
				}else if(this.islongPress == true){
				    console.log("长按事件点击");
				}
				
			} ,
			addAppint: function() {
				var that = this;   
				if(this.currentAppotime) {
					let usetime = this.day+' '+this.currentAppotime
					if(that.tableFrom.storeid) {
						uni.navigateTo({
							url: '/pagesA/crm/appoint/newAppoint?storeid=' +  (that.tableFrom.storeid||'') + '&usetime=' +  (usetime||'')
						})
					} else {
						uni.navigateTo({
							url: '/pagesA/crm/appoint/newAppoint?usetime=' +  (usetime||'')
						})
						
					}
				}
			} 
		}, 
	}
</script>

<style lang="scss" scoped>
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	
	.sales_head {
		border-top: 1rpx solid #CCC;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// padding: 20rpx 24rpx;
		background: #fff;
	 
		.tablist {
			padding: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #333;
	
			.bottomimg {
				width: 20rpx;
				height: 33rpx;
				margin-left: 20rpx;
			}
		}
	}
	.btnself {
		width: 15%;
		height: 70rpx;
		display: inline;
		padding: 2px;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		margin-left: 2px; 
		background: #03aa96;
	}
	 .post {
		position: absolute;
		text-align : left;
		background-color: #00FF00;
		left: 0px;
		top: 0px;
		}
	.pull_con {
	
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		text-align: center;
		color: #999;
		box-sizing: border-box;
	
		.pull_item {
			width: 100%;
			margin-bottom: 90rpx;
			margin-right: 27rpx;
	
			:first-child {
				padding-bottom: 10rpx;
			}
	
			:last-child {
				padding-bottom: 50rpx;
			}
		}
	}
	
	.charts-box {
		width: 100%;
		height: 400px;
		background: #fff;
	}

	.querylist {
		margin: 40rpx 0 30rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.queryfir {
			margin-right: 15rpx;
			box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);
			background: #fff;
			border-radius: 8rpx;
		}

		.querysec {
			box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);
			background: #fff;
			border-radius: 8rpx;
		}

		// 数据看板
		.form_right {
			width: 180rpx;
			height: 70rpx;
			font-size: 22rpx;
			color: #666;
			text-align: center;
			line-height: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.bottomimg {
				width: 20rpx;
				height: 33rpx;
				margin-left: 15rpx;
			}
		}
	}

	.person_rank {

		.achievement_body {
			margin: 30rpx;

			.achievement_title {
				border-radius: 10rpx;
				padding: 20rpx 0 40rpx;
				background-color: #fff;
				display: flex;
				text-align: center;
				flex-wrap: wrap;

				.title_item {
					width: 50%;

					:first-child {
						padding: 20rpx;
						color: #ccc;
					}
				}
			}
		}

		.achievement_footer {
			margin: 0 30rpx;
			overflow: hidden;

			.footer_table {
				display: flex;

				.table_time {
					width: 180rpx;
					white-space: nowrap;

					.item_title {
						padding-left: 20rpx;
						font-weight: 700;
						height: 90rpx;
						line-height: 90rpx;
						border: 1rpx solid #f2f2f2;
						border-right: 0;
					}

					.time_item {
						padding-left: 20rpx;
						height: 190rpx;
						// line-height: 190rpx;
						background-color: #fff;
						border-bottom: 1rpx solid #EAEAEA;

					}
				}

				.scroll {
					white-space: nowrap;
					// width: 100%;
					width: 750rpx;
					overflow: hidden;

					.con_title {
						.title_head {
							display: inline-block;
							// #ifdef MP-DXX
							width: 200rpx;
							// #endif
							
							 // #ifndef MP-DXX
							width: 100rpx;
							// #endif
							height: 90rpx;
							line-height: 90rpx;
							text-align: left;
							border-top: 1rpx solid #f2f2f2;
							border-bottom: 1rpx solid #f2f2f2;
						}

						:last-child {
							border-right: 1rpx solid #f2f2f2;
						}
					}

					.con_content {
						position: relative;
						// .content_item {
							.con_data {
								display: inline-block;
								// #ifdef MP-DXX
								width: 200rpx;
								// #endif
								
								 // #ifndef MP-DXX
								width: 100rpx;
								// #endif
								height: 190rpx;
								// line-height: 190rpx;
								text-align: left;
								background-color: #fff;
								border-bottom: 1rpx solid #EAEAEA;
								border-left: 1rpx solid #EAEAEA;
							}
						// }
					}
				}
			}
		}

		.pagination_demo {
			background-color: #fff;
			padding: 30rpx 60rpx;
			margin: 0 30rpx;
		}

		.van_po {
			position: absolute;

			.screen_con {
				z-index: 9999;
				background-color: #fff;

				.screen_title {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 20rpx 20rpx 24rpx;
					border-bottom: 1rpx solid #EAEAEA;

					:first-child {
						font-size: 28rpx;
						font-weight: 700;
					}
				}

				.screen_style {
					.style_title {
						padding-left: 24rpx;
						padding-top: 30rpx;
					}

					.style_con {
						display: flex;
						width: 560rpx;
						flex-wrap: wrap;
						text-align: center;
						padding-left: 9rpx;

						.style_item {
							width: 150rpx;
							height: 60rpx;
							line-height: 60rpx;
							border: 1rpx solid #f4f4f4;
							margin: 15rpx 15rpx;
							color: #b6b6b6;
						}

						.type_active,
						.time_active {
							border: 1rpx solid #52c1f5;
							color: #52c1f5;
						}
					}

					.style_input {
						margin: 20rpx;
						border: 1rpx solid #EAEAEA;
						padding-left: 24rpx;

						input {
							height: 80rpx;
						}
					}
				}
			}
		}

		.button_bottom {
			display: flex;
			position: fixed;
			width: 100%;
			bottom: 0;
			right: 0;
			left: 0;
			font-size: 32rpx;
			height: 90rpx;
			text-align: center;

			.reset {
				flex: 1;
				line-height: 90rpx;
				color: #1e89fe;
			}

			.sure {
				flex: 1;
				line-height: 90rpx;
				background-color: #03aa96;
				color: #fff;
			}

		}
	}
</style>
